
<head>
<!-- Create a simple CodeMirror instance -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/clojure/clojure.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/css/reveal.css">

  <style type="text/css">
  .reveal .CodeMirror-lines {
    text-align: left !important;
}
 </style>
</head>
<body>
    <div class="reveal">
      <div class="slides">
 
<section>
<klipse-snippet id="code" contenteditable="true">
</klipse-snippet>
</section>
<section>
  <textarea>
    (map inc [1 2 3])
    </textarea>
  </section>
</div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/js/reveal.js"></script>

<script>
  Reveal.initialize({
  //keyboard: false,
  });

  
    </script>
    <script>
    customElements.define('klipse-snippet', class extends HTMLElement {
  constructor() {
    super(); 

    // Attach a shadow root to <fancy-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
@import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css";
:host {
 all: initial;
 }

.reveal div {
 all:initial;
 text-align: right;
}
.reveal section {
 all:initial;
}

.reveal .slides {
    all:initial;
}
.reveal span {
 all:initial;
}
 </style> 
    <textarea id="shadow-code">(map inc [1 2 3])</textarea>`
    ;
  }
});
</script>
   <script>
  var elem = document.querySelector('klipse-snippet').shadowRoot.querySelector('textarea');

  var editor = CodeMirror.fromTextArea(elem, {
    lineNumbers: true,
    mode: 'clojure'
  });
</script>
</body>
